<template>
  <div>
    <template v-if="isMobile">
      <el-date-picker
        :value="value[0]"
        @input="(_value) => $emit('change',[_value, ...value.slice(1, 2)])"
        :type="type=== 'datetimerange' ? 'datetime' : 'date'"
        :default-time="defaultTime[0]"
        placeholder="开始日期"
        :value-format="valueFormat || 'yyyy-MM-dd HH:mm:ss'"
        class="small-date-picker"
      />
      <div>至</div>
      <el-date-picker
        :value="value[1]"
        @input="(_value) => $emit('change',[value[0], _value])"
        :type="type=== 'datetimerange' ? 'datetime' : 'date'"
        :default-time="defaultTime[1]"
        placeholder="结束日期"
        :value-format="valueFormat || 'yyyy-MM-dd HH:mm:ss'"
        class="small-date-picker"
      />
    </template>

    <el-date-picker
      v-else
      :value="value"
      @input="$emit('change', $event)"
      :type="type"
      :default-time="defaultTime"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :value-format="valueFormat || 'yyyy-MM-dd HH:mm:ss'"
      class="small-date-picker"
    />


  </div>
</template>

<script>
import { isMobile } from "mobile-device-detect";
export default {
  name: "MobileDatePicker",
  model: {
    prop: "value", // 将默认的 prop 名 value 改为 title
    event: "change", // 将默认的事件名 input 改为 change
  },
  props: {
    value: Array,
    defaultTime: Array,
    valueFormat: String,
    type: String
  },
  data() {
    return {
      isMobile,
    };
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
.small-date-picker {
  max-width: 400px;
  min-width: 350px;
  @media only screen and (max-width: 800px) {
    width: 300px !important;
  }
}
</style>
